<template>
  <div class="px-40 py-40">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>快速导航</span>
        <!-- <el-button type="primary" size="small" class="pull-right">操作按钮</el-button> -->
      </div>
      <div>
        <!-- 路由注册 -->
        <el-tag v-for="item in tagList" class="mr-10">
          <a :href="'/' + item.value">{{ item.label }}</a>
        </el-tag>
      </div>
      <div class="pt-10">
        <el-tag v-for="(item, key) in componentList" :key="key" class="mr-10" @click="componentIs = item">
          {{ item }}
        </el-tag>
      </div>
    </el-card>
    <!-- 组件展示 -->
    <component :is="componentIs"> </component>
    <!-- <el-card>
      <div><el-button type="primary" @click="handleToIframe">主页面向iframe发送信息</el-button></div>
      <iframe ref="fIframe" class="iframeClass" src="http://localhost:8080/iframeCall"></iframe>
    </el-card> -->
  </div>
</template>
<script>
import cssComp from '@/components/cssOpenClose';
import { numberFormat } from '@/utils/customhelp.js';
import draggable from '@/views/draggable/index.vue';
import itemRender from '@/vxeTable/itemRender.vue';
import sorTable from '@/vxeTable/sorTable.vue';
import columns from '@/vxeTable/columns.vue';

export default {
  mixins: [],
  components: {
    cssComp,
    draggable,
    itemRender,
    sorTable,
    columns,
    promise: () => import('@/views/demo/promise.vue'),
    mathjs: () => import('@/views/demo/mathjs.vue'),
    Attrs: () => import('@/views/demo/attrs.vue'),
    ImportTs: () => import('@/views/javascript/import/index.vue'),
    ComClass: () => import('@/views/javascript/class/index.vue'),
    vue27: () => import('@/views/vue2.7/index.vue')
  },
  data() {
    return {
      number: '123',
      data: '',
      msg: 'test0',
      msga: 'testa',
      componentIs: '',
      tagList: [
        { value: 'home', label: 'Home' },
        { value: 'vueis', label: 'Vue-Is' },
        { value: 'hook', label: 'hook' },
        { value: 'vmodel', label: 'vmodel' },
        { value: 'validate', label: '自定义校验' },
        { value: 'money', label: '金额编辑组件' },
        { value: 'mathexpress', label: 'JS公式解析' },
        { value: 'vuePrismEditor', label: 'vuePrismEditor编辑器' },
        { value: 'aceEditor', label: 'aceEditor' }
      ],
      componentList: ['cssComp', 'draggable', 'sorTable', 'columns', 'promise', 'mathjs', 'Attrs', 'ImportTs', 'ComClass', 'vue27']
    };
  },
  created() {},
  mounted() {
    // 监听子页面想父页面的传参
    // this.handleListener();
  },
  provide: function () {
    return {
      getmsg: function () {
        console.log('我是来自父组件的getmsg方法', this.msga);
        console.log('我是来自父组件的getmsg方法', this.msg);
      },
      msg: this.msg
    };
  },
  methods: {
    handleListener() {
      // 监听子页面想父页面的传参
      window.addEventListener('message', function (event) {
        //此处执行事件
        console.log('监听子页面向父页面的传参', event.data);
      });
    },
    shiftNumber() {
      this.data = numberFormat(this.number);
    },
    a() {
      console.log('自定义输出a-a-a-a--a');
    },
    // 父页面处发向子页面传参
    handleToIframe() {
      let data = {
        from: 'parent page',
        code: 200,
        data: '来自父页面的数据！！！'
      };
      this.$refs.fIframe.contentWindow.postMessage(data, '*');
    }
  }
};
</script>
<style scoped>
.iframeClass {
  width: 300px;
  height: 100px;
  border: 1px solid rgb(0, 170, 255);
}
.el-tag {
  cursor: pointer;
}
</style>
